<template>
	<view class="mycircle-content" v-if="loadEnd">
		<!-- 头部 -->
		<titleBar :show-data="title_data" :css-data="title_css" @change="getVal" :status="newIndex"></titleBar>
		<!-- 主体 -->
		<view class="circle-cont">
			<circleList :status="newIndex" :type='type' :circleList="circleList" @cancleSub="cancleSub"
				@deleteCircle="deleteCircle" :newIndex='newIndex'></circleList>
			<view class="empty" v-if="circleList.length == 0 && loadEnd">
				<image src="/static/empty.png" mode="widthFix"></image>
				<view>暂未{{emptyName}}频道~</view>
			</view>
			<view class="" style="margin: 10rpx 0;color: #656565;font-size: 26rpx;text-align: center;"
				v-if="circleList.length != 0 && !hasMore && newIndex == 1">
				没有更多了~
			</view>
		</view>
		<view class="safe-padding"></view>
	</view>
</template>

<script>
	import circleList from '@/pages/Component/forum/component/circle/circle-list.vue';
	import titleBar from '@/pages/Component/forum/component/title/title-bar.vue';
	import ikz from '@/pages/Common/tools.js';
	export default {
		components: {
			circleList,
			titleBar
		},
		data() {
			return {
				loadEnd: false,
				type: 'mycircle',
				newIndex: 2,
				title_data: [{
						id: 1,
						name: '我关注的频道'
					},
					{
						id: 2,
						name: '我创建的频道'
					},
				],
				title_css: {
					width: '36%'
				},
				circleList: [],
				emptyName: '关注',

				page: 1,
				limit: 10,
				hasMore: false
			}
		},
		onLoad(option) {
			if (option.status) {
				this.newIndex = option.status
			}
			this.loadEnd = false
			if (this.newIndex == 2) {
				this.emptyName = '创建'
				this.circleList = []
				this.getMyCreateCircle()
				return
			}
			this.getMyCircle()
		},
		onShow() {
			if (this.newIndex == 2) {
				this.circleList = []
				this.getMyCreateCircle()
				return
			}
			this.getMyCircle()
		},
		onPullDownRefresh() {
			this.loadEnd = false
			this.page = 1
			if (this.newIndex == 1) {
				this.getMyCircle()
			} else {
				this.getMyCreateCircle()
			}
		},
		onReachBottom() {
			if (this.hasMore) {
				if (this.newIndex == 1) {
					this.page++
					this.getMyCircle()
				}
			}
		},
		methods: {
			getVal(e) {
				// console.log(e)
				this.loadEnd = false
				uni.showLoading({
					mask: true
				})
				this.newIndex = e
				this.page = 1
				if (this.newIndex == 1) {
					this.emptyName = '关注'
					this.circleList = []
					this.getMyCircle()
				} else {
					this.emptyName = '创建'
					this.circleList = []
					this.getMyCreateCircle()
				}
			},

			// 获取我关注的频道列表
			getMyCircle() {
				let path = '/xyb/posts/posts/user_follow'
				let data = {
					token: uni.getStorageSync('local_user_session'),
				}
				ikz.requestPost(path, data, res => {
					if (res.statusCode == 200) {
						// console.log(res.data.data);
						this.circleList = res.data.data.data
						this.emptyName = '创建'
					}
					this.loadEnd = true
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},
			// 获取我创建的频道列表
			getMyCreateCircle() {
				let path = '/xyb/posts/posts/user_circle'
				let data = {
					token: uni.getStorageSync('local_user_session'),
					page: this.page,
					limit: this.limit
				}
				ikz.requestPost(path, data, res => {
					if (res.statusCode == 200) {
						console.log(res.data.data);
						let circleList = res.data.data.data
						this.circleList = this.page == 1 ? circleList : [...this.circleList, ...circleList]
						this.hasMore = this.page < res.data.data.count / this.limit ? true : false
						this.emptyName = '关注'
					}
					this.loadEnd = true
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},
			// 取消关注频道
			cancleSub(id) {
				let path = '/xyb/posts/posts_circle/follow_del'
				let data = {
					token: uni.getStorageSync('local_user_session'),
					circle_id: id
				}
				ikz.requestPost(path, data, res => {
					// console.log('关注频道', res);
					if (res.statusCode == 200) {
						this.getMyCircle()
						this.circleList.forEach(el => {
							if (el.id == id) {
								el.follow_status = 0
							}
						})
						uni.showToast({
							title: '取消关注成功',
							icon: 'none'
						})
					}
				})
			},
			// 删除频道
			deleteCircle(id) {
				let path = '/xyb/posts/posts_circle/del'
				let data = {
					token: uni.getStorageSync('local_user_session'),
					id
				}
				ikz.requestPost(path, data, res => {
					// console.log('删除频道', res);
					if (res.statusCode == 200) {
						// this.circleList.forEach((el, index) => {
						// 	if (el.id == id) {
						// 		this.circleList = this.circleList.slice(index, 1)
						// 	}
						// })
						this.getMyCreateCircle()
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7FB;
	}

	.mycircle-content {
		.circle-cont {
			overflow: hidden;
			margin-top: 20rpx;

			.empty {
				overflow: hidden;
				background-color: #fff;
				font-size: 30rpx;
				text-align: center;

				image {
					width: 200rpx;
					margin-top: 20rpx;
				}

				view {
					margin: 20rpx 0;
					color: #aaa;
				}
			}
		}
	}
</style>
